<template>
	<div>
		<div style="height: 20px;display:flex;align-items: center;">
			<span style="height: 20px;line-height: 20px;font-size: 20px;margin-bottom: 20px;">添加设备</span>
		</div>
		<el-form label-position="left" label-width="100px" ref="tableData" :model="tableData">
			<el-form-item label="设备编号" prop="eId">
				<el-input v-model="tableData.eId"></el-input>
			</el-form-item>
			<el-form-item label="设备名称" prop="eName">
				<el-input v-model="tableData.eName"></el-input>
			</el-form-item>
			<!-- 			<el-form-item label="设备图片信息" prop="imageUrl">
				<el-input v-model="tableData.imageUrl"></el-input>
			</el-form-item>
			 -->
			<el-form-item label="上传图片:" label-width="100px" prop="imageUrl">
				<el-input v-model="tableData.imageUrl" v-if="false"></el-input>
				<el-upload class="upload-demo" ref="upload" drag action="http://localhost:8888/images/upload" multiple
					:limit="4" :auto-upload="true" :on-success="handleAvatarSuccess" list-type="picture">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						将图片拖到此处，或<em>点击上传</em>
						<!-- <img v-if="tableData.imageUrl" :src="tableData.imageUrl" class="avatar"> -->
					</div>
				</el-upload>
			</el-form-item>

			<el-form-item label="设备描述信息" prop="eDescription">
				<el-input v-model="tableData.eDescription"></el-input>
			</el-form-item>
			<el-form-item label="设备分类Id" prop="categoryId">
				<el-input v-model="tableData.categoryId"></el-input>
			</el-form-item>
			
			<el-form-item label="设备真实售价" prop="eRealprice">
				<el-input v-model="tableData.eRealprice"></el-input>
			</el-form-item>
			<el-form-item label="设备定价" prop="ePrice">
				<el-input v-model="tableData.ePrice"></el-input>
			</el-form-item>
			<el-form-item label="设备库存" prop="eConuts">
				<el-input v-model="tableData.eConuts"></el-input>
			</el-form-item>
			<el-form-item label="设备是否上架" >
				<el-radio-group v-model="tableData.eStatus">
					<el-radio :label="true">是</el-radio>
					<el-radio :label="false">否</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click.prevent="submitForm('tableData');addEquipments('tableData')">提交</el-button>
		<el-button @click="resetForm('tableData')">重置</el-button>
		</el-form-item>
	</div>
</template>

<script>
	import request from '@/utils/axios/request.js'
	export default {
		data() {
			return {
				tableData: {
					eId: '',
					eName: '',
					imageUrl: '',
					eDescription: '',
					categoryId: '',
					ePrice: '',
					eRealprice: '',
					eStatus: '',
					eConuts: ''
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('请确认提交');
						console.log(this.tableData)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//添加多个图片
			// submitForm(formName) {
			// 	this.$refs[formName].validate((valid) => {
			// 		if (valid) {
			// 			alert('请确认提交');
			// 			console.log(this.$refs)
			// 			let {uploadFiles, action, data} = this.$refs.upload
			// 			      const formData = new FormData()
			// 			      uploadFiles.map(file => {
			// 			        formData.append("files",file.raw)
			// 			      })
			// 				  console.log(formData)
			// 			      request({
			// 			        url: action,
			// 			        method: 'post',
			// 			        data: formData
			// 			      }).then((res)=>{
			// 					  this.upSucccess(res)
			// 					  console.log(res)
			// 				  })
			// 			//console.log(this.tableData)
			// 		} else {
			// 			console.log('error submit!!');
			// 			return false;
			// 		}
			// 	});
			// },
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			//图片回显
			handleAvatarSuccess(res, file,fileList) {
				console.log('res');
				console.log(res);
				console.log('res');
				console.log(file)
				this.tableData.imageUrl = res.data;
			},
			addEquipments: function() {
				// let formData = JSON.stringify(this.tableData)
				// console.log(formData)
				request({
					method: 'post',
					url: '/equipments/' + this.tableData.eId,
					// params:{
					// 	eId:this.tableData.eId
					// },
					// header: {
					// 	// 'Content-Type': 'application/x-www-form-urlencoded'
					// 	"Content-Type": "application/json",

					// 	// "Content-Type": "multipart/form-data"
					// },

					// data: this.formData

					data: {
						eId: this.tableData.eId,
						eName: this.tableData.eName,
						imageUrl: this.tableData.imageUrl,
						eDescription: this.tableData.eDescription,
						categoryId: this.tableData.categoryId,
						ePrice: this.tableData.ePrice,
						eRealprice: this.tableData.eRealprice,
						eStatus: this.tableData.eStatus,
						eConuts: this.tableData.eConuts
					}
				}).then((res) => {
					// var jsonObj = JSON.parse(JSON.stringify(res.data.data[0]));
					// console.log(this.tableData)
					// console.log("提交成功")
					console.log(res)
					if (res.data.code == 102) {
						alert("插入数据成功")
					}
					if (res.data.code == 103) {
						alert("插入失败，该设备编号已存在")
					}
				})
			}
		}
	}
</script>

<style>
	.el-form-item {
		width: 40%;
		margin-left: 30%;
		margin-right: 30%;
	}
</style>